<template>
   <div class="mywallet">
		<wxc-minibar title="添加银行卡">
			<!-- <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px;"></image>
			<text slot="middle" style="font-family: PingFangSC-Medium;font-size: 34px;color: #fff;">添加银行卡</text> -->
		</wxc-minibar>
		<scroller style="position:fixed;top:90px;bottom:0;left:0;right:0;background-color:#F5F5F5;">
			<div class="addcard_item">
				<div class="addcard_item_fl">
					<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">姓名</text>
				</div>
				<div class="addcard_item_fr">
					<input style="font-size: 28px; color: #A7A7A7;"  class="input" v-model="formmodel.name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="addcard_item">
				<div class="addcard_item_fl">
					<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">身份证号</text>
				</div>
				<div class="addcard_item_fr">
					<input style="font-size: 28px; color: #A7A7A7;"  class="input" v-model="formmodel.identityNumber" placeholder="请输入证件号码">
				</div>
			</div>
			<div class="addcard_item" @click="gobanklist()">
				<div class="addcard_item_fl">
					<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333;">银行名称</text> 
				</div>
				<div class="addcard_item_fr1">
					<text style="font-size: 28px;" :style="fontSize">{{ formmodel.bankName }}</text>
					<text class="discover_item_arrow" style="margin-right:32px;">&#xe61c;</text>
				</div>
			</div>
			<div class="addcard_item">
				<div class="addcard_item_fl">
					<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">银行卡号</text> 
				</div>
				<div class="addcard_item_fr">
					<input style="font-size: 28px; color: #A7A7A7;"  class="input" v-model="formmodel.bankCard" placeholder="请输入银行卡号">
				</div>
			</div>
				<!-- <div class="addcard_item" @click="gobanklist()">
				<div class="addcard_item_fl">
					<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333;">开户地区</text> 
				</div>
				<div class="addcard_item_fr1">
					<text style="font-size: 28px;" :style="fontSize">{{ formmodel.bankName }}</text>
					<text class="discover_item_arrow" style="margin-right:32px;">&#xe61c;</text>
				</div>
			</div> -->
			<div class="addcard_item">
				<div class="addcard_item_fl">
					<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">开户行地址</text>
				</div>
				<div class="addcard_item_fr">
					<input style="font-size: 28px; color: #A7A7A7;"  class="input" v-model="formmodel.bankAddress" placeholder="请输入开户行地址">
				</div>
			</div>
			<div class="addcard_item">
				<div class="addcard_item_fl">
					<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">预留手机号</text>
				</div>
				<div class="addcard_item_fr">
					<input style="font-size: 28px; color: #A7A7A7;"  class="input" v-model="formmodel.mobile" placeholder="请输入预留手机号">
				</div>
			</div>
			<div class="addcard_item">
				<div class="addcard_item_fl">
					<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">验证码</text>
				</div>
				<div class="code_md">
					<input type="number" v-model="formmodel.code" maxlength="6" placeholder="填写验证码" class="input">
				</div>
				<div class="code_fr">
					<button class="codeBtn" v-if="sendAuthCode" slot="button" @click="judeg"><text class="code-text">获取验证码</text></button>
					<button class="codeBtn" v-if="!sendAuthCode" slot="button" size="small" type="default" disabled><text class="code-text">{{ auth_time }}秒重新获取</text></button>
				</div>
			</div>

			<button class="my-info-save" @click="save"><text style="font-size:32px;color:#ffffff;">确定</text></button>
		</scroller>


		<wxc-popup 
			popup-color="#fff"
			ref="wxcPopup"
			@wxcPopupOverlayClicked="popupOverlayBottomClick"
			:show="isRight"
			pos="right"
			width="750">
			<banklist @setName="getName"></banklist>
		</wxc-popup>
   </div>
</template>

<script>
const modal = weex.requireModule("modal");
const navigator = weex.requireModule("navigator");
import { WxcPopup } from "weex-ui";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js";
import { customResponse, postResponsesToken} from "@/api.js";
import { getBaseUrl, serialize } from "@/utils/index.js";
import banklist from "./banklist.vue"
let bankListApp = new BroadcastChannel('app')

export default {
	data() {
		return {
			checkTimer: 0,
			disabled: false,
			t: 60,
			timeflag: true,
			baseURL:'',
			showtitle:'获取验证码',
			content:'', //显示提示内容
			alertCode:false, //提示错误弹窗
			auth_time: 0, //到计时
			isRight:false,
			sendAuthCode:true, //倒计时状态
			formmodel:{
				mobile:'',
				code:'',
				name:'', //姓名
				identityNumber:'', // 身份证号
				bankName: '请选择银行名称', // 银行名称
				bankCard:'',
				bankAddress:'' // 开户账号地址
			}
		}
	},
	components: {
		WxcMinibar,
		WxcPopup,
		banklist
	},
	created() {
		this.baseURL = getBaseUrl(weex.config.bundleUrl, true);
	},

	computed:{
		fontSize() {
			return { color: this.formmodel.bankname !== '请选择银行名称' &&  this.formmodel.bankname != '' ? '#333' : '#a7a7a7'} 
		}
	},

	methods: {
		
		gobanklist() {
			this.isRight = true
		},

		getName(item) {
			this.formmodel.bankName = item.title
			this.formmodel.bankType = item.value
			this.$refs.wxcPopup.hide()
		},
	  
	  	popupOverlayBottomClick() {
			  this.isRight = false
		},

		alert(title, msg) {
			this.alertCode = true;

			this.content = title;

			setTimeout(() => {
				this.alertCode = false
			}, 2000);
		},

		judeg() {
			if (!this.formmodel.mobile) {
				modal.toast({ message: '手机号不能为空' })
				return false;
			}
			if (!/^1[0-9]{10}$/.test(this.formmodel.mobile)) {
				modal.toast({ message: '请输入正确的手机号码' })
				return false;
			}

			this.getCode()
		},

		// 添加银行卡
		save() {
			for( let [key, value] of Object.entries(this.formmodel)) {
				if(value === '' || value === '请选择银行名称') {
					modal.toast({ message: '请补全字段' })
					return;
				}
			}

			if(!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.formmodel.identityNumber)) {
				modal.toast({ message: '请输入正确的身份证号码'})
				return;
			}

			if(!/^([1-9]{1})(\d{15}|\d{18})$/.test(this.formmodel.bankCard)) {
				modal.toast({ message: '请输入正确的银行卡号'})
				return;
			}

			if (!/^1[0-9]{10}$/.test(this.formmodel.mobile)) {
				modal.toast({ message: '请输入正确的手机号码' })
				return false;
			}

			this.saveBankCard()
		},

		async saveBankCard() {
			let data = await postResponsesToken('account/bank/addBankCard', this.formmodel)	

			if( data.code === 0)  {
				navigator.pop()
				bankListApp.postMessage('post')
			} else {
				modal.toast({ message: data.msg });
			}
		},
		
		async getCode() {
			
			let data = await customResponse({url:'code?' + serialize({mobile: this.formmodel.mobile, type: 0}),  type:'GET',  header:{"Content-Type": "application/json;charset=utf-8"}})

			if (data.code === 0) {
				this.sendAuthCode = false
				this.auth_time = 60
				
				// 倒计时
				let auth_timetimer = setInterval(() => {
					this.auth_time--
					if (this.auth_time <= 0) {
						this.sendAuthCode = true
						clearInterval(auth_timetimer);
					}
				}, 1000)

			} else {
				modal.toast({ message: data.msg });
			}
		}
	}
};
</script>

<style scoped>
  .mywallet{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #F5F5F5;
  }
  .addcard_item{
	  width:750px;
      height: 112px;
      background-color: #FFFFFF;
      border-bottom-width: 1px;
      border-bottom-color: rgb(245,245,245);
      border-bottom-style: solid;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
   }
   .addcard_item_fl{
	   justify-content: center;
       width:220px;
	   height: 112px;
       margin-left: 32px;
	   font-family: PingFangSC-Medium;
   }
   .addcard_item_fr{
	   height: 112px;
       width:500px;
	   justify-content: center;
   }
   .addcard_item_fr1{
       flex: 1;
       display: flex;
       justify-content: space-between;
       flex-direction: row;
       align-items: center;
    }
  
   .discover_item_arrow{
       font-family:iconfttf;
       font-size:26px;
       color:#D8D8D8;
   }
   .code_fl{
        flex: 1;
        padding-left: 32px;
        margin-right: 80px;
    }
    .code_md{
        flex: 2;

    }
    .code_fr{
        flex: 2;

    }
   .codeBtn {
        width:200px;
        opacity: 1;
        padding-left:15px;
        border-left-width: 2px;
        border-left-style:solid;
        border-left-color: #333333;
        background-color:#fff;
        height: 40px;
        text-align: right;
        align-items: center;
        justify-content: center;
    }


	.input{
		width: 480px;
		height:100px;
		font-size: 28px;
		color: #333;
	}

	.code-text {
		font-family: PingFangSC-Regular;
		font-size: 28px;
		color: #333333;
	}

	.my-info-save {
		width:680px;
		height: 96px;
		background-color: #E70D0D;;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		border-top-left-radius:4px;
		border-top-right-radius: 4px;
		margin-top:80px;
		margin-left:35px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
